<template>
  <el-drawer
    :append-to-body="true"
    title="登录风格切换"
    :size="260"
    custom-class="login-setting-drawer"
    :visible="visible"
    @close="visible=false"
  >
    <div class="p-h-s">
      <div
        class="theme-item"
        :class="{active: current === t.THEME_ID}"
        v-for="t in themes"
        :key="t.THEME_ID"
        @click="$emit('change', t)"
      >
        <el-image :src="t.THEME_BACK" />
        <div class="ta-c m-t-mini">
          {{ t.THEME_ID_TEXT }}
        </div>
      </div>
      <el-alert
        title="系统版本号"
        type="info"
        :closable="false"
        description="1.0.0"
        style="margin-top: 18px;"
      />
      <el-alert
        title="技术支持"
        type="info"
        :closable="false"
        description="北京北科博研科技有限公司"
        style="margin-top: 16px;"
      />
      <el-alert
        title="咨询电话"
        type="info"
        :closable="false"
        description="电话:010-63204448"
      />
    </div>
  </el-drawer>
</template>

<script>

export default {
  name: 'LoginSettings',
  data () {
    return {
      visible: false
    }
  },
  props: {
    themes: {
      type: Array,
      default: () => []
    },
    current: {
      type: String,
      default: ''
    }
  },
  methods: {
    show () {
      this.visible = true
    }
  }
}
</script>

<style lang="scss">
.login-setting-drawer {
  .el-drawer__header {
    margin: 0;
    padding: 10px;
    padding-left: 20px;
  }

  .el-divider--horizontal {
    margin: 0;
  }

  .theme-item {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px;
    font-size: 14px;
    color: #424e61;
    margin-bottom: 20px;
    cursor: pointer;

    &:last-child {
      margin-bottom: 0;
    }

    &.active {
      border-color: #409eff;
    }

    .el-image {
      height: 106px;
      width: 100%;
    }
  }
}
</style>
